<template>
  <div>
    <!-- 修改部分 -->
    <!-- <div class="ipt">
      <span>姓名:</span>
      <el-input v-model="upname" placeholder="请输入姓名" class="size"></el-input>
      <span>修改项：</span>
      <el-select v-model="upval" placeholder="请选择修改项" class="size">
        <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="index"></el-option>
      </el-select>
      <span>修改内容</span>
      <el-input v-model="updata" placeholder="请输入修改内容" class="size"></el-input>
      <el-button type="primary" @click="upData()">确定</el-button>
      <el-button @click="cancelUP()">重置</el-button>
    </div> -->
    <!-- 员工状态部分 -->
    <el-table :data="teacher1.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%" max-height="450">
      <el-table-column label="姓名" prop="name" align='center'>
      </el-table-column>
      <el-table-column label="职位" prop="job" align='center'>
      </el-table-column>
      <el-table-column label="状态" prop="state" align='center'>
      </el-table-column>
      <el-table-column label="入职时间" prop="intime" align='center'>
      </el-table-column>
      <el-table-column label="在职时间" prop="workhours" align='center'>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40,50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="teacher1.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        teacher1 : '',
        search: "",
        //修改数据
        upname: '',
        upval: '',
        updata: '',
        // 分页的参数
        // total: this.total,
        currentPage: 1, //当前页数
        pageSize: 10, // 每页显示条数
        indexsss: '',
        //修改选项
        options: [{
            value: '选项1',
            label: '职位'
          },
          {
            name: '王小虎',
            code: 'JX11123',
            post: '教师',
            state: '在职',
            date: '2016-05-02',
            datenum: '15'

          },
          {
            value: '选项3',
            label: '入职时间'
          }
        ],
      }
    },
    methods: {
     //分页方法
     handleSizeChange(val) {
       this.pageSize = val
       this.currentPage = 1
       // console.log(`每页 ${val} 条`)
     },
     handleCurrentChange(val) {
       this.currentPage = val
       console.log(`当前页: ${val}`);
     },
      delData(index) {
        //删除学生信息
        var delindex = ((this.currentPage - 1) * this.pageSize) + index;
        // console.log(delindex);
        this.tableData.splice(delindex, 1);
      },
      con() {
        this.indexsss = this.tables[0].id
        console.log(this.tables[0].post);
      },
      updated() {
        this.con()
      },
      //修改
      upData() {
        console.log(1111);
        console.log()
        // this.tables[0].post = this.updata;
        if (this.upval == 0) {
          this.tables[0].post = this.updata;
        } else if (this.upval == 1) {
          this.tables[0].state = this.updata;
        } else if (this.upval == 2) {
          this.tables[0].date = this.updata;
        }
      },
      //重置修改
      cancelUP() {
        this.upname = '';
        this.upval = '';
        this.updata = '';
      }
    },
    beforeMount() {
      //调取数据
      getData1: {
        this.$axios({
          method: "get",
          url: "http://10.1.8.189:3000/api/user/all",
        }).then((res) => {
          this.teacher1 = res.data
          console.log(this.teacher1);
        })
      };
    },
    computed: {
      tables() {
        const upname = this.upname;
        if (upname) {
          // console.log("upname输入的搜索内容：" + this.upname);
          return this.tableData.filter(data => {
            // console.log("object:" + Object.keys(data))
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(upname) > -1

            })
          })
        }
        return this.tableData
      }
    },
  }
</script>

<style scoped="scoped">
  .ipt {
    margin-top: 15px;
    float: left;
    margin: 15px 0px 0px 55px;
  }

  .size {
    width: 200px;
    margin-right: 15px;
  }
